<template>
  <view class="pages">
    <view class="flex padding-lr-sm padding-tb bg-white">
      <view class="fu-block-180 margin-right-sm">
        <fu-image radius="16rpx" :src="logo" mode="aspectFill"></fu-image>
      </view>
      <view class="flex-sub" style="min-width: 1px;">
        <view class="fu-fs32 text-bold text-333 text-cut" v-if="order_sn">{{i18n['订单编号']}}: {{order_sn }}</view>
        <!-- <view class="text-lg text-333 text-cut" v-if="server_no">服务编号: {{server_no }}</view> -->
        <view class="fu-fs24 text-666 margin-top-sm">{{i18n['物流公司']}}: {{express_name}}</view>
        <view class="fu-fs24 text-666 margin-top-sm">{{i18n['物流单号']}}: {{express_no}}</view>
      </view>
    </view>
    <!-- 时间轴 -->
    <view class="timeline margin-top-sm padding-tb padding-lr-sm bg-white">
      <view class="title-block flex align-center text-lg text-333 padding-bottom-sm solid-bottom">{{i18n['物流详情']}}</view>
      <view class="line-box padding-tb" v-if="physical.length != 0">
        <block v-for="(item,index) in physical" :key="index">
          <view class="line-item flex">
            <view class="flex flex-direction justify-start align-center margin-right-sm">
              <view class="dot-shadow">
                <view class="dot"></view>
              </view>
              <view class="line"></view>
            </view>
            <view>
              <view class="title">{{item.AcceptStation}}</view>
              <view class="sub-title">{{item.AcceptTime}}</view>
            </view>
          </view>
        </block>
      </view>
      <fu-empty-ui v-else :pagingListNoListDataText="i18n['暂无物流信息']" emptyImage="message"></fu-empty-ui>
    </view>
    <!-- 无数据 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        order_sn: null,
        express_name: '',
        express_no: '',
        physical: [], // 物流信息
        logo: '', //
        server_no:''
      };
    },
    onLoad(options) {
      this.setNavigationBarTitle(this.i18n['物流信息'])
      const { order_sn,server_no } = options;
	  // 正常物流
	  if(order_sn){
		 this.order_sn = order_sn;
	  }
	  // 退货物流
      if(server_no){
      	this.server_no = server_no;
      }
      this.getData();
    },
    methods: {
      getData() {
        let data = {};
        if(this.order_sn){
          data.order_sn = this.order_sn;
        }
        if(this.server_no){
          data.server_no = this.server_no;
        }
        this.$api.post(global.apiUrls.postOrderLogs,data)
          .then(res => {
            console.log("物流信息", res.data);
            if (res.data.code == 1) {
              this.express_name = res.data.data.ShipperCode;
              this.express_no = res.data.data.LogisticCode;
              this.physical = res.data.data.Traces.reverse();
              this.logo = res.data.data.logo;
            }else{
              this.$message.info(res.data.msg);
            }
          })
      },
      // #ifndef H5
      // 复制快递号
      copy(){
        uni.setClipboardData({
          data: this.express_no,
          success: () => {
            this.$message.info(this.i18n['复制成功']);
          }
        });
      },
      // #endif
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    min-height: 100vh;
  }
  .timeline{
    .line-box{
      .line-item{
        min-height: 146rpx;
        .dot-shadow{
          width: 26rpx;
          height: 26rpx;
          background-color: rgba(153,153,153, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transform: translateY(4rpx);
          .dot{
            width: 14rpx;
            height: 14rpx;
            background-color: #BFBFBF;
            border-radius: 14rpx;
          }
        }
        .line{
          height: 100%;
          border-left: 2rpx dashed #DDDDDD;

        }
        .title{
          font-size: 28rpx;
          color: #999999;
        }
        .sub-title{
          font-size: 24rpx;
          color: #BFBFBF;
          line-height: 1;
          margin-top: 24rpx;
          margin-bottom: 60rpx;
        }


      }

      .line-item:first-child{
        .dot-shadow{
          // TODO: 验证是否有效 这个变量被修改了
          background-color: $bgthemeOpacity;
          .dot{
            background-color: $bgtheme;
          }
        }
        .title{
          color: #333333;
        }
        .sub-title{
          color: #333333;
        }
      }
      .line-item:last-child{
        .line{
          display: none;
        }
      }
    }
  }
</style>
